<!--The content below is only a placeholder and can be replaced.-->
<div id="app">
  <app-header></app-header>
  <div class="nav-bar">
    <div class="container clearfix">
      <!-- nav start -->
      <ul class="nav">
        <li>
          <a href="#" class="active">BTC</a>
        </li>
        <li>
          <a href="#">ETH</a>
        </li>
        <li>
          <a href="#">ETC</a>
        </li>
        <li>
          <a href="#">BCC</a>
        </li>
      </ul>
      <!-- nav end -->
    </div>
  </div>
  <!-- chart start -->
  <div class="chart">
    <div class="container">
      <div id="graph" style="width:100%;height:300px"></div>
    </div>
  </div>
  <!-- chart end -->
  <!-- nostrud start -->
  <div class="nostrud">
    <div class="container">
      <h2>NOSTRUD EXERCITATION</h2>
      <ul class="main clearfix">
        <li class="col-lg-3 col-md-6 col-xs-12" *ngFor="let info of infos">
          <i class="iconfont icon-bitcoin"></i>
          <h3>{{ info.name }}</h3>
          <div class="nostrud-caculate clearfix">
            <ul class="nostrud-left">
              <li>Pool Hashrate</li>
              <li>Miners Count</li>
              <li>Works Count</li>
              <li>Price BTC</li>
              <li>Price usd</li>
            </ul>
            <ul class="nostrud-right">
              <li>48654.9 KSol/s</li>
              <li>13112</li>
              <li>10000</li>
              <li>1000mB</li>
              <li>$1000</li>
            </ul>
          </div>
          <dl>
            <dd>PPS at -2%</dd>
            <dd>Daily payouts</dd>
            <dd>No payout commission</dd>
            <dd>Default minmum payout is 10mBtc</dd>
          </dl>
          <a href="#" class="start-button">START MINING</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- nostrud end -->
  <!-- news start -->
  <div class="news">
    <div class="container">
      <div class="news-content clearfix">
        <div class="news-left col-sm-12 col-lg-5">
          <h2>EQUAE ISPA QUAE</h2>
          <h3>Volupatem accusantium doloremque laudantium</h3>
          <ul>
            <li class="clearfix" *ngFor="let list of lists; let i = index" (click)="turn(i)">
              <span>{{list.choice}}</span>
              <i *ngIf="list.state" class="iconfont icon-kaiguanguan-copy1"></i>
              <i *ngIf="!list.state" class="iconfont icon-kaiguanguan-copy"></i>
            </li>
          </ul>
          <a href="#" class="enter">DORLOREMQUE LAUDANTIUM
            <i class="iconfont icon-arrow-left"></i>
          </a>
        </div>
        <div class="news-right col-sm-12 col-lg-6">
          <h2>TOP MINERS</h2>
          <ul>
            <li *ngFor="let top of tops;let i = index">
              <span class="user-num">{{i+1}}</span>
              <span class="user-id">{{top.name}}</span>
              <span class="user-speed">{{top.speed}} MH/S</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- news end  -->
  <!-- tips start -->
  <div class="tips">
    <div class="container">
      <h2>TITLE</h2>
      <div class="clearfix">
        <section class="col-sm-12 col-lg-5">
          content
        </section>
        <ul class="col-sm-12 col-lg-7 clearfix">
          <div class="tip-left col-lg-6 col-sm-12">
            <li>list1</li>
            <li>list</li>
            <li>list</li>
          </div>
          <div class="tip-right col-lg-6 col-sm-12">
            <li>list2</li>
            <li>list</li>
            <li>list</li>
          </div>
        </ul>
      </div>
      <div class="share">
        <i class="icon iconfont icon-twitter"></i>
        <i class="icon iconfont icon-facebook"></i>
      </div>
    </div>
  </div>
  <!-- tips end -->
  <footer>
  </footer>
</div>